<template>
  <ep-advance-card class="search-left">
    <div class="top-layout">
      <p>共24项数据</p>
      <ep-button class="btn" type="primary">新建问卷</ep-button>
    </div>
    <ep-divider></ep-divider>
    <div class="form-list" v-for="(item, index) in 6" :key="index">
      <ep-form :form="formData" name-width="0">
        <ep-row>
          <ep-form-item class="item1">新生个人信息</ep-form-item>
          <ep-form-item class="item2">
            <ep-tag type="primary" size="mini">问卷</ep-tag>
            <ep-tag type="success" size="mini">学习</ep-tag>
          </ep-form-item>
          <ep-form-item class="item3">
            <ep-dropdown @item-click="handleItemClick" drop-class="drop-class-custom" type="click">
              <ep-button slot="item" type="text" size="small" icon="more" right-icon></ep-button>
              <ep-dropdown-item item-key="1">
                <font color="#2296F3">编辑</font>
              </ep-dropdown-item>
              <ep-dropdown-item item-key="2">
                <font color="#27AE60">删除</font>
              </ep-dropdown-item>
            </ep-dropdown>
          </ep-form-item>
          <ep-form-item class="item4"> <i class="status status1"></i>进行中 </ep-form-item>
        </ep-row>
        <ep-row>
          <ep-form-item class="item5">开放时间：3月30号至4月20号</ep-form-item>
          <ep-form-item class="item6">填写人：系统指定人员</ep-form-item>
        </ep-row>
        <ep-row>
          <ep-form-item class="item7">2022-01-01 09:20</ep-form-item>
          <ep-form-item class="btns">
            <ep-button type="primary">立即开始</ep-button>
          </ep-form-item>
        </ep-row>
      </ep-form>
      <ep-divider></ep-divider>
    </div>
    <div class="pagination">
      <ep-pager :total-num="total" right></ep-pager>
    </div>
  </ep-advance-card>
</template>
<script>
export default {
  name: 'left',
  data() {
    return {
      list: [],
      formData: {
        property1: '',
        property2: '',
        property3: '01,02',
        property4: '03'
      },
      total: 50
    }
  },
  methods: {
    handleItemClick() {}
  }
}
</script>
<style lang="less" scoped>
.search-left {
  .top-layout {
    height: 26px;
    p {
      float: left;
      line-height: 26px;
    }
    .btn {
      float: right;
    }
  }
  .form-list {
    .ep-row {
      margin-bottom: 0;
    }
    .item1 {
      font-size: 24px;
      font-weight: bold;
      display: inline-block;
      margin-right: 2%;
    }
    .item2 {
      .ep-tag {
        margin-right: 5px;
      }
      display: inline-block;
    }
    .item3 {
      float: right;
      cursor: pointer;
    }
    .item4 {
      float: right;
      margin-right: 2%;
      .status {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #4979ff;
        display: inline-block;
        margin-right: 5px;
        &.status1 {
          background: #4979ff;
        }
        &.status2 {
          background: #9e9ea2;
        }
        &.status3 {
          background: #eeaa22;
        }
      }
    }
    .item5 {
      color: #7f8083;
      display: inline-block;
      margin-right: 2%;
    }
    .item6 {
      color: #7f8083;
      display: inline-block;
    }
    .item7 {
      float: left;
      color: #aaaaac;
    }
    .btns {
      float: right;
      margin-top: -5px;
    }
  }

  /deep/.ep-advance-card-content {
    padding: 15px;
  }
  /deep/.ep-divider--horizontal {
    margin: 15px 0;
  }
}
</style>
